<template>
	<view>
		<!-- webview包一层盒子设置fixed定位，使页面有其他元素时，点击可以生效 -->
		<view style="position: fixed; top: 0;">
			<web-view :src="playerUrl" style="width: 100%; height: 300px; background-color: red;"></web-view>
		</view>

		<view class="info" :style="{marginTop: topV,  width: '100%'}">
			<text class="title uni-margin-warp uni-common-pl">{{detail.name}}&nbsp;第{{idx+1}}集</text>
			<!-- 剧集切换 -->
			<view class="video-info uni-padding uni-common-mt uni-margin-warp">
				<view class="uni-flex uni-row episode-bg">			
					<view class='episode' v-for="item,index in playerList" style="width: 155rpx; padding: 10rpx 10rpx;" >
						<view @click="playVideo(item,index)" :style="{border: index == idx ?'1rpx solid red' : '1rpx solid white'}" class="uni-flex uni-center uni-border">
							<text class="age-content-title" :style="{color : index == idx ? 'red' : 'white'}">第{{index+1}}集</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	var wv;
	export default {
		data() {
			return {
				playerUrl: "",
				isshow: false,
				detail: {},
				idx: 0,
				topV: 0,
				playerList: [],
				baseUrl :''
			}
			
		},
		onLoad(option) {
			console.log('======================onload--url=====================')
			console.log(option.url)

			this.idx = option.index
			
			let obj = JSON.parse(option.detail)
			let obj2 = JSON.parse(option.list)
			this.detail = obj
			this.playerList = obj2
			
			this.baseUrl = option.baseUrl
			if(!this.baseUrl.includes('?url=')) {
				this.baseUrl = option.baseUrl + '?url='
			}
			let url = this.baseUrl + `${encodeURIComponent(option.url)}`
			this.playerUrl = url
			console.log(this.baseUrl)
			console.log(this.playerUrl)
			
			// // #ifdef H5
			// window.open(url,'_blank') 
			// // #endif
			
			//age_b9b0A7%2BICnX%2B5EfEbTfcQ39yCBs%2B9qia17TMmsDSKAWOzpxCG23v5nD%2FHzoAvgZhZQzR3yRXKkTCw%2F6dQUvFfRS9
	//https://43.240.156.118:8443/vip/?url=age_d54bD1bhFiSye7T%2BjbXya9mYBaPXWF9TWqNvFbeMPInu%2FkBvbV6OXxHyFNlRX242t07fHMCO8FVIE4kjW2vDJ8N9
	//https://43.240.156.118:8443/vip/?url=age_b9b0A7+ICnX+5EfEbTfcQ39yCBs+9qia17TMmsDSKAWOzpxCG23v5nD/HzoAvgZhZQzR3yRXKkTCw/6dQUvFfRS9
	//https://43.240.156.118:8443/vip/?url=age_b9b0A7+ICnX+5EfEbTfcQ39yCBs+9qia17TMmsDSKAWOzpxCG23v5nD/HzoAvgZhZQzR3yRXKkTCw/6dQUvFfRS9		
		},
		methods: {
			test() {
				console.log('111')
			},
			playVideo(item,index) {
				this.idx = index
				let url = this.baseUrl + `${encodeURIComponent(item[1])}`
				console.log('==============url===========')
				console.log(url)
				this.playerUrl = url
				console.log(this.baseUrl)
				console.log(this.playerUrl)
				console.log('==============url--end===========')
				// this.$nextTick(() => {
				//     wv.loadurl(url)
				// });
				// window.open(this.playerUrl,'_blank')
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			var currentweb = this.$scope.$getAppWebview()
			var vm = this
			const systemInfo = uni.getSystemInfoSync();
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度，单位px
			
			setTimeout(function(){
				wv = currentweb.children()[0]
				wv.setStyle({top:statusBarHeight+44,height:300})
				vm.topV = 320 + 'px'
			},1000)
			
			// #endif
			
			// #ifdef H5
			
			// #endif
		},
		mounted() {
	
			
		}
	}
</script>


<style>
	
	.title {
		color: white;
		font-size: 20px;
		font-weight: bold;
		word-wrap: break-word;
	}
	
	.video-info {
		background-color: rgba(32, 32, 32, 1);
		border: 1rpx solid rgb(32, 32, 32);
		border-radius: 8rpx;
		min-height: 200rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}
	
	.episode-bg {
		flex-wrap: wrap;
		margin-top: 10rpx;
	}
	
	.res-bg {
		border-radius: 4rpx; 
		height: 50rpx;
	}
	
	/* 点击后缩放 */
	.episode {
		transition: transform 0.3;
	}
	
	.episode:active {
		transform: scale(0.9);
	}
	
	.detail-text {
		color: white;
		font-size: 26rpx;
		line-height: 26rpx;
		max-width: 320rpx;
		padding-left: 10rpx;
	}
	
	.uni-border {
		border-radius: 4rpx; 
		height: 50rpx;
	}
	
	.video-box {
		position: fixed; 
		top: 0;
		height: 300px;
		width: 100%;
	}

</style>